<!--
    Desenvolvido pela Fábrica de Software do CESUPA.
    Todos os direitos reservados.

    @author Breno Leite
-->

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:appcommons="http://www.fabsoft.cesupa.br/appcommons">

    <ui:composition template="/templates/three-columns-internal-template.xhtml">
        <ui:param name="showpagecontrols" value="true"/>
        <ui:param name="showpagehelpcontrol" value="false"/>

        <ui:define name="header-right-area">
            <h:form id="search-form">
                <input accesskey="p" class="search-field special-textfield keyboardInput"
                       jsfc="h:inputText" required="true" id="search-field"
                       type="text" value="#{HelpSearchBean.query}">
                <rich:toolTip showDelay="500" direction="top-right">
                    <span class="title">
                        <h:graphicImage url="/images/icons/idea-16x16.gif"/>
                        Dicas de pesquisa
                    </span>
                    <br/>
                    <div class="content">
                        <table>
                            <tr>
                                <td valign="top"><b>Coringas<br/> *, ?</b></td>
                                <td valign="top">
                                    te?t -> text, test<br/>
                                    test* -> test, tests or tester
                                </td>
                            </tr>
                            <tr>
                                <td valign="top"><b>Fuzzy<br/>~</b></td>
                                <td valign="top">roam~ -> foam, roams</td>
                            </tr>
                            <tr>
                                <td valign="top"><b>Proximidade<br/>~</b></td>
                                <td valign="top">"jakarta apache"~10</td>
                            </tr>
                            <tr>
                                <td valign="top"><b>Boosting<br/>^</b></td>
                                <td valign="top">jakarta^4 apache</td>
                            </tr>
                            <tr>
                                <td valign="top"><b>NOT / AND</b></td>
                                <td valign="top">"jakarta apache" NOT "Apache Lucene",<br/> "jakarta apache" AND "Apache Lucene"</td>
                            </tr>
                            <tr>
                                <td valign="top"><b>+ / -</b></td>
                                <td valign="top">+jakarta lucene, <br/>"jakarta apache" -"Apache Lucene"</td>
                            </tr>
                            <tr>
                                <td valign="top"><b>Grupos</b><br/>()</td>
                                <td valign="top">(jakarta OR apache) AND website</td>
                            </tr>
                        </table>
                        <rich:separator height="1"/>
                        Para detalhamentos sobre o mecanismo de procura, <br/>
                        consulte o tópico de ajuda correspondente.
                    </div><br/>
                </rich:toolTip>
                </input><br/>
                <div class="buttons" style="float:right;">
                    <a id="search-button" jsfc="h:commandLink" accesskey="p"
                       class="primarybutton" title="Iniciar pesquisa"
                       action="#{HelpSearchBean.search}">
                        #{words.SearchHelp}
                    </a>
                </div>
                <br/>
            </h:form>
        </ui:define>

        <ui:define name="controls">
            <h:form>
                <rich:toolBar height="34" itemSeparator="line">
                    <rich:toolBarGroup styleClass="rich-toolbar-group">
                        <h:graphicImage value="/images/icons/printer-16x16.gif" />
                        <h:commandLink value="Imprimir" styleClass="text"
                                       onclick="printDocument();"/>
                    </rich:toolBarGroup>
                </rich:toolBar>
            </h:form>
        </ui:define>

        <ui:define name="styles">
            .box{
            background-color:#E0ECFF;
            }

            .box h2{
            margin:0px;
            padding:0px;
            }

            .search-field{
            padding:6px 0px 6px 25px;
            width:50%;
            }

            .search-field {
            background:transparent url(#{facesContext.externalContext.request.contextPath}/images/icons/search-16x16.gif) no-repeat 2% 50%;
            background-color:white;
            }

            .related-topics-box-header-class, .sections-summary-box-header-class,
            .help-topics-box-header-class, .index-box-header-class{
            padding-left:20px;
            background-repeat:no-repeat;
            }

            .related-topics-box-header-class{
            background-image:url(#{facesContext.externalContext.request.contextPath}/images/icons/page-16x16.gif);
            }

            .index-box-header-class{
            background-image:url(#{facesContext.externalContext.request.contextPath}/images/icons/index-16x16.gif);
            }

            .sections-summary-box-header-class{
            background-image:url(#{facesContext.externalContext.request.contextPath}/images/icons/section-16x16.gif);
            }

            .rich-tree a, .rich-tree a:visited{
            text-decoration:none;
            color:black;
            }

            .index-toogle-panel-body{
            padding:0;
            }
        </ui:define>

        <ui:define name="additional-header-content">
            <!-- help styles -->
            <link href="#{facesContext.externalContext.request.contextPath}/styles/others/help-styles.css" rel="stylesheet" type="text/css" media="screen" />

            <!-- breadcrumb styles -->
            <link href="#{facesContext.externalContext.request.contextPath}/styles/others/breadcrumb-styles.css" rel="stylesheet" type="text/css" media="screen" />

            <!-- specific styles -->
            <link href="#{facesContext.externalContext.request.contextPath}/styles/structures/three-columns-internal-template-style.css" rel="stylesheet" type="text/css" media="screen" />
            <link href="#{facesContext.externalContext.request.contextPath}/styles/components/internal-main-section-comp-style.css" rel="stylesheet" type="text/css" media="screen" />
            <link href="#{facesContext.externalContext.request.contextPath}/styles/components/internal-top-section-comp-style.css" rel="stylesheet" type="text/css" media="screen" />
            <link href="#{facesContext.externalContext.request.contextPath}/styles/components/footer-section-comp-style.css" rel="stylesheet" type="text/css" media="screen" />
        </ui:define>

        <ui:define name="onpageload">
            Nifty("div#page-header", "tl tr small");
            Nifty("div#status,div#content,div#right-column,div#footer,div#page-info-control,div#page-help-control", "small");
            Nifty("div#related-topics,div#help-topics-form:help-topics", "small");
        </ui:define>

        <ui:define name="leftcolumn">
            <h:form id="help-topics-form">
                <rich:simpleTogglePanel switchType="client" label="Tópicos de Ajuda"
                                        bodyClass="help-tree-toogle-panel-body"
                                        id="help-topics-box"
                                        headerClass="related-topics-box-header-class">
                    <rich:effect event="onexpand" type="BlindDown" params="duration:0.3" />
                    <rich:effect event="oncollapse" type="BlindUp" params="duration:0.3" />
                    <rich:tree id="table-of-contents-tree" style="width:160px;height:200px;"
                               ajaxSubmitSelection="true" switchType="ajax"
                               icon="/images/icons/book-16x16.gif">
                        <rich:recursiveTreeNodesAdaptor roots="#{TreeBuilderBean.tableOfContents}"
                                                        var="node" nodes="#{node.childs}">
                            <rich:treeNode>
                                <a href="#{facesContext.externalContext.request.contextPath}#{node.properties['path']}">
                                    #{node.text}
                                    <rich:toolTip horizontalOffset="100" showDelay="1000"
                                                  direction="bottom-right">
                                        <div class="title">
                                            <h:graphicImage url="/images/icons/page-16x16.gif"/>
                                            <span>#{node.text}</span>
                                        </div>
                                        <div class="content">
                                            #{node.properties['description']}
                                            <br/>
                                            <br/>
                                        </div>
                                    </rich:toolTip>
                                </a>
                            </rich:treeNode>
                        </rich:recursiveTreeNodesAdaptor>
                    </rich:tree>
                </rich:simpleTogglePanel>
                <br/>
                <rich:simpleTogglePanel switchType="client" label="#{words.Index}"
                                        bodyClass="index-toogle-panel-body"
                                        id="index"
                                        headerClass="index-box-header-class">
                    <rich:effect event="onexpand" type="BlindDown" params="duration:0.3" />
                    <rich:effect event="oncollapse" type="BlindUp" params="duration:0.3" />
                    <h:selectManyListbox converter="HelpTopicConverter"
                                         style="width:100%;height:200px;border:none;font-size:12px;">
                        <f:selectItems value="#{HelpIndexBean.helpTopics}"/>
                    </h:selectManyListbox>
                </rich:simpleTogglePanel>
            </h:form>
            <br/>
        </ui:define>

        <ui:define name="rightcolumn">

            <c:if test="#{showsectionssummary == null || showsectionssummary == true}">
                <rich:simpleTogglePanel id="sections-summary" switchType="client"
                                        label="#{words.Sections}" headerClass="sections-summary-box-header-class">
                    <rich:effect event="onexpand" type="BlindDown" params="duration:0.3" />
                    <ol class="styled-list">
                        <ui:insert name="sectionssummary">
                        </ui:insert>
                    </ol>
                </rich:simpleTogglePanel>
            </c:if>
            <br/>

            <c:if test="#{showrelatedtopics == null || showrelatedtopics == true}">
                <rich:simpleTogglePanel id="related-topics" switchType="client"
                                        label="#{words.RelatedTopics}"
                                        headerClass="related-topics-box-header-class">
                    <rich:effect event="onexpand" type="BlindDown" params="duration:0.3" />
                    <ul class="styled-list">
                        <ui:insert name="relatedtopics">
                            #{messages.NoRelatedTopics}
                        </ui:insert>
                    </ul>
                </rich:simpleTogglePanel>
            </c:if>
            <br/>
            <br/>
        </ui:define>

        <ui:define name="content">
            <div class="help-content">
                <ui:insert name="help-content">
                </ui:insert>
            </div>
        </ui:define>
    </ui:composition>
</html>